<template>
  <div class="upload-container">
    <h2>上传数据文件（.txt）</h2>

    <!-- 表格选择 -->
    <div class="form-group">
      <label for="table-select">选择目标表格：</label>
      <select id="table-select" v-model="selectedTable" :disabled="isLoading">
        <option disabled value="">-- 请选择要上传的表 --</option>
        <option v-for="option in tableOptions" :key="option.value" :value="option.value">
          {{ option.text }}
        </option>
      </select>
    </div>

    <!-- 文件输入 -->
    <div class="form-group">
      <label for="file-input">选择TXT文件（以分号分隔）：</label>
      <input type="file" id="file-input" ref="fileInputRef" accept=".txt" @change="handleFileChange" :disabled="isLoading" />
    </div>

    <!-- 上传按钮 -->
    <div class="form-group">
      <button @click="handleUpload" :disabled="!selectedFile || !selectedTable || isLoading">
        {{ isLoading ? '正在上传...' : '上传' }}
      </button>
    </div>

    <!-- 状态消息 -->
    <div v-if="message" class="message" :class="{ error: isError }">
      {{ message }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from '@/apiaxios/axiosInstance';

// --- 响应式状态 ---
const selectedTable = ref(''); // 存储选中表格的值
const selectedFile = ref(null); // 存储文件对象
const isLoading = ref(false); // 跟踪上传过程
const message = ref(''); // 给用户的反馈消息
const isError = ref(false); // 用于设置错误消息样式的标志
const fileInputRef = ref(null); // 文件输入元素的引用

// --- 静态数据 ---
const tableOptions = [
  {
    value: 'user_flavor',
    text: 'user_flavor 用户个人喜好'
  },
  {
    value: 'tab_rank',
    text: 'tab_rank 标签热度'
  },
  {
    value: 'video_rank',
    text: 'video_rank 视频热度'
  }
];
const tableurl = {
  user_flavor: '/backend/userFlavor/addBatch',
  tab_rank: '/backend/tabRank/addBatch',
  video_rank: '/backend/videoRank/addBatch'
};

// --- 方法 ---

// 处理文件选择
const handleFileChange = event => {
  const file = event.target.files[0];
  if (file && file.type === 'text/plain') {
    selectedFile.value = file;
    message.value = `已选择文件：${file.name}`;
    isError.value = false;
  } else {
    selectedFile.value = null;
    // 如果选择了无效文件，重置输入框的视觉显示
    if (fileInputRef.value) {
      fileInputRef.value.value = '';
    }
    if (file) {
      // 只有当实际选择了文件（但类型错误）时才显示错误
      message.value = '请选择一个有效的.txt文件。';
      isError.value = true;
    } else {
      // 选择已清除
      message.value = '';
      isError.value = false;
    }
  }
};

// 处理上传过程
const handleUpload = () => {
  if (!selectedFile.value || !selectedTable.value) {
    message.value = '请选择一个表格和一个文件。';
    isError.value = true;
    return;
  }

  isLoading.value = true;
  isError.value = false;
  message.value = '正在读取文件...';

  const reader = new FileReader();

  reader.onload = async e => {
    try {
      const fileContent = e.target.result;
      message.value = '正在解析数据...';

      // 按行分割，去除空白字符，过滤空行，然后按分号分割
      const lines = fileContent
        .split(/\r?\n/) // 处理Windows/Unix的换行符
        .map(line => line.trim())
        .filter(line => line.length > 0);

      if (lines.length === 0) {
        throw new Error('文件为空或仅包含空白字符。');
      }

      let parsedData = [];
      if (selectedTable.value === 'user_flavor') {
        parsedData = lines.map((line, index) => {
          const fields = line.split(';');
          if (fields.length !== 4) {
            throw new Error(`解析第 ${index + 1} 行时出错：user_flavor表该行应包含4个字段，以分号分隔。`);
          }
          return {
            id: parseInt(fields[0].trim(), 10),
            uid: parseInt(fields[1].trim(), 10),
            tname: fields[2].trim(),
            tpercent: fields[3].trim()
          };
        });
      } else if (selectedTable.value === 'video_rank') {
        parsedData = lines.map((line, index) => {
          const fields = line.split(';');
          if (fields.length !== 3) {
            throw new Error(`解析第 ${index + 1} 行时出错：video_rank表该行应包含3个字段，以分号分隔。`);
          }
          return {
            id: parseInt(fields[0].trim(), 10),
            vid: parseInt(fields[1].trim(), 10),
            views: parseInt(fields[2].trim(), 10)
          };
        });
      } else if (selectedTable.value === 'tab_rank') {
        parsedData = lines.map((line, index) => {
          const fields = line.split(';');
          if (fields.length < 2 || fields.length > 4) {
            throw new Error(`解析第 ${index + 1} 行时出错：tab_rank表该行应包含2到4个字段，以分号分隔。`);
          }
          const result = {
            id: parseInt(fields[0].trim(), 10),
            tname: fields[1].trim().replace(/^"|"$/g, ''),
            cnt: fields.length >= 3 ? parseInt(fields[2].trim(), 10) : 0
          };
          if (fields.length === 4) {
            result.uid = parseInt(fields[1].trim(), 10);
            result.tname = fields[2].trim().replace(/^"|"$/g, '');
            result.cnt = parseInt(fields[3].trim(), 10);
          }
          return result;
        });
      } else {
        parsedData = lines.map((line, index) => {
          const fields = line.split(';');
          if (fields.length < 1) {
            throw new Error(`解析第 ${index + 1} 行时出错：分割后该行内容为空。`);
          }
          return fields;
        });
      }

      message.value = `已解析 ${parsedData.length} 条记录。正在发送到服务器...`;

      // --- 模拟后端API调用 ---
      // 用你实际的fetch/axios调用替换此部分
      await sendDataToBackend(selectedTable.value, parsedData);

      message.value = `已成功为表格 '${selectedTable.value}' 上传数据。`;
      isError.value = false;
      // 可选：成功上传后清除选择
      selectedFile.value = null;
      if (fileInputRef.value) {
        fileInputRef.value.value = ''; // 重置文件输入框的视觉显示
      }
      // selectedTable.value = ''; // 也可以选择重置表格选择
    } catch (error) {
      console.error('上传处理出错：', error);
      message.value = `错误：${error.message}`;
      isError.value = true;
    } finally {
      isLoading.value = false;
    }
  };

  reader.onerror = e => {
    console.error('文件读取错误：', e);
    message.value = '读取文件时出错。';
    isError.value = true;
    isLoading.value = false;
  };

  // 以文本形式读取文件
  reader.readAsText(selectedFile.value);
};

// --- 模拟后端调用 ---
// 用你实际的API调用逻辑（例如，使用fetch或axios）替换此函数
function sendDataToBackend(tableName, data) {
  // console.log(`模拟API调用，将数据上传到表格：${tableName}`);
  // console.log('数据：', data);
  // console.log(tableurl[tableName]);
  axios
    .post(tableurl[tableName], data, {
      headers: {
        'Content-Type': 'application/json' // 设置请求头为表单编码
      }
    })
    .then(response => {
      // console.log(response);
      if (response.status == 200) {
        console.log(response);
        if (response.data.code == 200) {
        } else {
          alert('文本内容不对');
        }
      } else {
        alert('后端响应错误！请过会再试');
      }
    })
    .catch(error => {
      if (error.response) {
        // 服务器返回了响应，根据状态码等进一步处理
        if (error.response.status === 400) {
          alert('请求参数有误，请检查输入内容');
        } else if (error.response.status === 401) {
          alert('未授权，请检查用户名和密码是否正确');
        } else {
          console.log(error);
          alert('请求出现错误，请稍后再试');
        }
      } else if (error.request) {
        // 请求已经发出，但没有收到响应，可能是网络问题等
        console.log('请求未收到响应，可能是网络问题，请检查网络连接');
        alert('请求出现网络问题，请检查网络连接后重试');
      } else {
        // 其他未知错误情况
        console.log(error);
        alert('请求出现未知错误，请稍后再试');
      }
    });
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 14px;
}

.upload-container {
  width: 400px;
  height: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 500px;
  margin: 20px auto;
  font-family: sans-serif;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group select,
.form-group input[type='file'],
.form-group button {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  /* 包括内边距和边框在元素的总宽度和高度内 */
}

.form-group input[type='file'] {
  /* 如果需要，对文件输入进行特定样式设置 */
  padding: 3px;
}

.form-group button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.form-group button:hover:not(:disabled) {
  background-color: #0056b3;
}

.form-group button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  background-color: #e0e0e0;
  border: 1px solid #d0d0d0;
}

.message.error {
  color: #d8000c;
  background-color: #ffd2d2;
  border-color: #ffbaba;
}
</style>
